<template>
  <div class="app-container">
    <el-form
      ref="settingForm"
      :model="settingForm"
      :rules="rules"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            label="用户"
            prop="user_id">
            <resource-select
              v-model="settingForm.user_id"
              :action="userGetList"
              valueKey="id"
              labelKey="nick_name"></resource-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="产品"
            prop="product_id">
            <resource-select
              v-model="settingForm.product_id"
              :action="productGetList"
              valueKey="id"
              labelKey="product_search_field"></resource-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="单价"
            prop="unit_price">
            <el-input-number
              style="width: 100%"
              :controls="false"
              v-model="settingForm.unit_price"
              :precision="4"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="备注"
            prop="remark">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              :autosize="{ minRows: 3 }"
              v-model="settingForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getList as userGetList, userProductSave, getUserProductDetail } from '@/api/user';
import { getList as productGetList } from '@/api/product';
import ResourceSelect from '@/components/ResourceSelect/index';
export default {
  name: 'add',
  props: {
    userProductId: {
      type: [String, Number],
      default: 0,
    },
  },
  components: {
    ResourceSelect,
  },
  watch: {
    userProductId: {
      handler(value) {
        this.getDetail(value);
      },
      immediate: true,
    },
  },
  data() {
    return {
      settingForm: {
        user_id: '',
        product_id: '',
        unit_price: 0,
        remark: '',
              },
      rules: {
        user_id: { required: true, trigger: 'change', message: '请选择用户' },
        product_id: { required: true, trigger: 'change', message: '请选择产品' },
        unit_price: { required: true, trigger: 'blur', message: '请填写单价' },
      },
      userListOptions: [],
      productListOptions: [],
      userGetList,
      productGetList,
    };
  },
  methods: {
        handleSubmit() {
      this.$refs.settingForm.validate(valid => {
        if (valid) {
          this.$emit('update:loadingButton', ['submit']);
          userProductSave(this.settingForm).then(res => {
            this.$message.success(res.message);
            this.$emit('update:loadingButton', []);
            this.$emit('update:visible', false);
          });
        }
      });
    },
    getDetail(value) {
            if (value > 0) {
        getUserProductDetail({ id: value }).then(res => {
          this.$set(this, 'settingForm', res.data);
        });
      }
    },
  },
};
</script>
